<template>
	<el-card shadow="hover" class="chart-card">
		<template #header>质检任务完成情况</template>
		<v-chart :option="option" autoresize style="width: 100%; height: 350px;" />
	</el-card>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getTaskProgressData } from '@/mock/dashboardData'

export default {
	setup() {
		const option = ref({})
		onMounted(() => {
			nextTick(() => {
				const { processNames, ratios } = getTaskProgressData()
				option.value = {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: processNames
					},
					series: [
						{
							name: '任务完成情况',
							type: 'pie',
							radius: '70%',
							center: ['60%', '50%'],
							data: processNames.map((name, i) => ({
								name,
								value: ratios[i]
							})),
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
							label: {
								formatter: '{b}: {d}%',
								fontSize: 14
							}
						}
					]
				}
			})
		})
		return { option }
	}
}
</script>

<style scoped>
.chart-card {
	height: 400px;
}
</style>
